<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="The JavaScript Oxidation Compiler Playground">
    <title>Oxc - The JavaScript Oxidation Compiler Playground</title>
    <link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/Boshen/oxc-assets/main/oxc.ico">
    <style>
      body { font-family: monospace; font-size: 16px; margin: 0 }
      button { cursor: pointer }
      label { display: inline-flex; align-items: center; cursor: pointer; user-select: none; }
      .cm-editor { height: 100%; }
      #logo { display: flex; justify-content: center; cursor: pointer; color: white; text-decoration: inherit; }
      #logo > img { margin-right: .5em; }
      #loading { background: white; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; justify-content: center; align-items: center; }
      #container { display: flex; height: 100vh; }
      #left { display: flex; flex: 1; flex-direction: column; border-right: 1px solid #444 }
      #editor { flex: 1; overflow-y: auto; }
      #panel { height: 20%; overflow-y: auto; padding: 1em; color: #d1d5da; background-color: #24292e; border-top: 1px solid #444!important; }
      #right { flex: 1; display:flex; flex-direction: column; min-width: 0; }
      .header { color: white; background: #24292e; border-bottom: 1px solid #444; }
      .left-container { padding: .8em 1em; display: flex; align-items: center; justify-content: space-between; }
      .controls { padding: .6em; }
      .controls > div { padding: .2em 1em; display: flex; align-items: center; }
      .controls > div > button { margin-right: 4px; }
      .controls > div > label { margin-right: 8px; }
      .controls label { font-size: 14px; }
      #duration { margin-left: auto; }
      #viewer { flex: 1; overflow-y: auto; }
      .query-button-green { background-color: #32CD59; border-color: #15c541; }
      .query-button-red { background-color: #e74c3c; border-color: #c0392b; }
      #query-results-viewer { height: 50%; border-top: 1px solid #444; display: none; }
      #divider { width: 4px; background: #444; }
      #divider:hover { background: #666; cursor: col-resize; }
    </style>
  </head>
  <body>
    <script type="module" src="./index.js"></script>
    <div id="loading">Loading Wasm (~400kB)...</div>

    <div id="container">
      <div id="left">
        <div class="header left-container">
          <a id="logo" href="https://oxc-project.github.io">
            <img height="100%" width="20" src="https://raw.githubusercontent.com/Boshen/oxc-assets/main/oxc.ico" alt="logo">
            <span>Oxc</span>
          </a>
          <div>
            <label id="type-check">Type Check (experimental)<input id="type-check-checkbox" type="checkbox"></label>
            <label id="syntax">Syntax Check<input id="syntax-checkbox" type="checkbox" checked></label>
            <label id="lint">Lint<input id="lint-checkbox" type="checkbox" checked></label>
          </div>
        </div>
        <div id="editor"></div>
        <div id="panel"></div>
      </div>
      <div id="divider"></div>
      <div id="right">
        <div class="header controls">
          <div>
            <button type="button" id="ast">AST</button>
            <button type="button" id="codegen">Codegen</button>
            <button type="button" id="ir">IR</button>
            <button type="button" id="prettier-ir">Prettier IR</button>
            <button type="button" id="prettier">Format (Prettier)</button>
            <button type="button" id="query">Query Playground</button>
            <button type="button" id="query-args-or-outputs" class="query-button-red">Show Query Arguments</button>
            <button type="button" id="ir-copy">Copy IR to clipboard</button>
          </div>
          <div>
            <!-- Format is experimental <button type="button" id="format">Format</button> -->
            <label id="transform">Transform<input id="transform-checkbox" type="checkbox"></label>
            <label>| Minify: </label>
            <label id="whitespace">whitespace<input id="whitespace-checkbox" type="checkbox"></label>
            <label id="mangle">mangle<input id="mangle-checkbox" type="checkbox"></label>
            <label id="compress">compress<input id="compress-checkbox" type="checkbox"></label>
            <div id="duration" title="Execution Time"></div>
          </div>
        </div>
        <div id="viewer"></div>
        <div id="query-results-viewer"></div>
      </div>
    </div>
  </body>
</html>
